Skip to main content

Introduction to React

Resources

React is a library for web and native interfaces. It provides powerful primitives (built-in functions/modules) that allow us to build user interfaces of varying complexities.

A JavaScript library is a collection of pre-written code that’s designed to make development easier. This code can be reused/reimplemented in our own codebases to achieve complex tasks.

1. Setting up a React Environment​

While there are several ways to create React projects (including manually) the recommended approach is using pre-built toolchains:

  • Vite: Currently recommended, offers excellent developer experience and fast performance
  • Next.js: Full-featured framework for production applications
  • Create React App (CRA): this was the standard tool until early 2023. It is now deprecated.

Vite​

# Create a new React project
npm create vite@latest my-first-react-app -- --template react

# Navigate and install dependencies
cd my-first-react-app
npm install

# Start development server
npm run dev

2. Project Structure​

The scaffolded project includes two main directories:

  1. public/: Contains static assets
    • Images
    • Icons
    • Browser configuration files
  2. src/: Contains the code that runs your app (application code)
    • main.jsx or index.js: Application entry point
    • App.jsx or App.js: Root component
    • Other component files
    • Styling files

3. Developer Tools​

It’s useful to be able to track (and make live changes to) the moving parts inside of your app for understanding and debugging your code. To this end, we can use a Chrome extension called React Developer Tools.